import { Modal, Row, Col, ModalProps, Empty } from 'antd';
import { FC, useMemo } from 'react';

import {
  Description,
  DescriptionList,
} from '@/biz-components/slice-file-upload/modal/description-list';

import { getPathValue } from '@/biz-components/_common/valueUtil';

import useIndexes from '@/biz-components/hooks/useIndexes';

import PrevNextNav from '@/biz-components/slice-file-upload/modal/prev-next-nav';
import { useSearchMeta } from '@/biz-components/hooks/useMetamodel';

import ViewContainer from '@/biz-components/slice-file-upload/modal/view-container';

export type DataItem = {
  fileUrl: string;
  [key: string]: any;
};

export interface FilePreviewModalProps extends Pick<ModalProps, 'visible' | 'onCancel'> {
  index: number;
  dataSource: DataItem[];
  modelMetaCode?: string;
  needReset?: boolean;
}


const FilePreviewModal: FC<FilePreviewModalProps> = ({
  visible,
  onCancel,
  index,
  dataSource,
  modelMetaCode,
  needReset
}) => {
  const { length } = dataSource;
  const lastIndex = useMemo(() => {
    return length - 1;
  }, [length]);

  const [current, prev, next, reset] = useIndexes(index, lastIndex);

  const record = useMemo(() => {
    return dataSource[current];
  }, [current, dataSource]);

  const { fileUrl, type, fileType } = record || {};

  const { tableColumns } = useSearchMeta(modelMetaCode || '');

  const handleCancel = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
    needReset && reset();
    onCancel && onCancel(e);
  }

  return (
    <Modal
      title="文件详情"
      visible={visible}
      onCancel={handleCancel}
      width={1300}
      closable
      maskClosable
      bodyStyle={{
        overflowY: 'auto',
      }}
      footer={null}
    >
      <PrevNextNav current={current} lastIndex={lastIndex} onPrevClick={prev} onNextClick={next} />

      <Row>
        <Col span={modelMetaCode ? 16 : 24}>
          <ViewContainer type={fileType || type} height={500} fileUrl={fileUrl} />
        </Col>

        {modelMetaCode ? (
          <Col span={8}>
            <DescriptionList>
              {tableColumns?.map((item) => {
                const { key, label } = item;
                const text = getPathValue<any, any>(record, key);
                return (
                  <Description label={label} key={key}>
                    {text}
                  </Description>
                );
              })}
            </DescriptionList>
          </Col>
        ) : null}
      </Row>
    </Modal>
  );
};

export default FilePreviewModal;
